<template>
	<view class="u-p-20">
		<view class="u-p-20 bg_FFFFFF">
			<u-form class="editCss" :model="model" :rules="rules" ref="uForm" label-width="200">
				<u-form-item prop="name" label="姓名">
					<u-input v-model="model.name" placeholder="请输入您的姓名" />
				</u-form-item>
				<u-form-item prop="mobile" label="手机号">
					<u-input maxlength="11" v-model="model.mobile" placeholder="请输入您的手机号" />
				</u-form-item>
				<u-form-item prop="code" label="验证码">
					<u-input class="" v-model="model.code" placeholder="请输入验证码" />
					<u-button slot="right" type="success" class="bg_none cl_FF2D23FF" size="mini"
						:customStyle="customStyle" :ripple="ripple" :hair-line="hairLine" @click="getCode">
						{{codeTips}}
					</u-button>
				</u-form-item>
				<u-form-item prop="loginpass" label="登录密码">
					<u-input type="password" v-model="model.loginpass" maxlength="6" placeholder="请输入登录密码/同支付密码" />
				</u-form-item>
				<!-- <u-form-item prop="quepass" label="确认登录密码">
					<u-input type="password" v-model="model.quepass" maxlength="6" placeholder="请输入确认登录密码/同支付密码" />
				</u-form-item> -->
				<!-- <u-form-item prop="tradepass" label="支付密码">
					<u-input type="password" v-model="model.tradepass" maxlength="6" placeholder="请设置(6位)支付密码" />
				</u-form-item>
				<u-form-item prop="tquepass" label="确认支付密码">
					<u-input type="password" v-model="model.tquepass" maxlength="6" placeholder="请设置确认(6位)支付密码" />
				</u-form-item> -->
				<!-- <u-form-item prop="regcode">
					<u-input v-model="model.regcode" placeholder="请输入邀请码" />
				</u-form-item> -->
			</u-form>
			<view class="u-m-t-20 u-flex-col u-col-center">
				<u-checkbox active-color="#EC4E13" label-size="26" v-model="checkbox">
					<text class="cl_666">我已阅读同意</text>
					<text class="cl_48A2FF" @click.stop="$u.route('/pages/login/agreement?title=用户协议')">《用户协议》</text>和
					<text class="cl_48A2FF" @click.stop="$u.route('/pages/login/agreement?title=隐私政策')">《隐私政策》</text>
				</u-checkbox>
			</view>
			<view class="u-m-t-20">
				<!-- #ifdef H5 -->
				<view @click="appDown"
					class="u-w-100 u-h-100 u-b-r-100 u-flex u-col-center u-row-center u-fixed u-r-0 u-b-300 u-z-300 bg_FF5502FF cl_FFF u-font-26 u-text-center">
					下载APP
				</view>
				<!-- #endif -->
				<view class="u-m-t-20">
					<u-button :customStyle="customStyle" :ripple="ripple" :hair-line="hairLine" class="blFF_FD u-b-r-20"
						@click="submit">注册
					</u-button>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view v-if="from!='link'" @click="$u.route('/pages/login/login')"
					class="u-m-t-20 cl_3C4656 u-p-b-20 u-font-26 u-text-center">
					已有账号，去登录 >
				</view>
				<!-- #endif -->
			</view>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
			<u-toast ref="uToast" />
		</view>

	</view>
</template>
<script>
	import {
		URL
	} from '@/config/config.js'
	export default {
		data() {
			return {
				// 表单参数
				model: {
					mobile: '',
					code: '',
					loginpass: '',
					// quepass: '',
					// tradepass: '',
					// tquepass: '',
					regcode: '',
					source: 'user',
					openid_wx: ''
				},
				// 正则验证参数
				rules: {
					name: [{
						required: true,
						message: '请输入真实姓名',
						trigger: 'blur',
					}],
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur',
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
					}],
					loginpass: [{
						required: true,
						message: '请输入登录密码',
						trigger: 'blur',
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.digits(value);
						},
						message: '登录必须为6位数字',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					// quepass: [{
					// 	required: true,
					// 	message: '请输入确认登录密码',
					// 	trigger: 'blur',
					// }],
					// tradepass: [{
					// 	required: true,
					// 	message: '请设置(6位)支付密码',
					// 	trigger: 'blur',
					// }],
					// tquepass: [{
					// 	required: true,
					// 	message: '请设置(6位)确认支付密码',
					// 	trigger: 'blur',
					// }],
				},
				//验证码参数
				codeTips: '获取验证码',
				// 选择框
				checkbox: false,
				styles: {
					color: '#FC3533'
				},
				// button参数
				hairLine: true,
				ripple: true,
				customStyle: this.$styleCls.btnStyle,
				isFrom: '',
				regcode: '',
				from: '',
				openid_wx: ''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(opt) {
			if (opt.openid_wx) {
				this.model.openid_wx = opt.openid_wx
			}
			if (opt.regcode) {
				uni.setStorageSync('zcRegcode', opt.regcode)
			}
			if (opt.from == 'link') {
				this.from = opt.from
				document.querySelector('.uni-page-head-hd').style.display = 'none'
			}
			this.isFrom = opt.from || ''
		},
		onShow() {
			if (uni.getStorageSync('zcRegcode')) {
				this.model.regcode = uni.getStorageSync('zcRegcode')
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.checkbox) {
							this.$refs.uToast.show({
								title: '请勾选协议',
								type: 'error',
							})
						} else {
							this.register()
						}
					} else {}
				});
			},
			// 注册
			register() {
				// this.model.regcode = 'PGK5FT'
				if (uni.getStorageSync('code_id')) {
					this.model.code_id = uni.getStorageSync('code_id')
				}
				this.$api.register(this.model, res => {
					if (res.data.code == 1) {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'success',
							callback: cal => {
								uni.removeStorageSync('zcRegcode')
								uni.removeStorageSync('code_id')
								if (this.isFrom == 'link') {
									window.location.href = `${URL.split('index.php')[0]}userDown/`
								} else {
									// #ifdef MP-WEIXIN
									uni.setStorageSync('token', res.data.data.token.access_token)
									uni.setStorageSync('userinfo', res.data.data.user)
									uni.setStorageSync("source", res.data.data.user.source)
									uni.switchTab({
										url: '/pages/home/home'
									})
									return
									// #endif
									// #ifndef MP-WEIXIN
									uni.navigateBack()
									return
									// #endif
								}
							}
						})
					}
				})
			},
			// 验证码事件
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码事件
			getCode() {
				if (this.model.mobile == '') {
					this.$u.toast('请输入手机号');
				} else {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						setTimeout(() => {
							this.send_sms()
						}, 1000);
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}
			},
			// 验证码接口
			send_sms() {
				let params = {
					mobile: this.model.mobile,
					type: 'register',
					uuid: '',
					captcha: ''
				}
				this.$api.sed_code(params, res => {
					if (res.data.code === 1) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}
				})

			},
			appDown() {
				window.location.href = `${URL.split('index.php')[0]}userDown/`
			}
		}
	}
</script>

<style lang="scss">
</style>